<!-- 客户列表选择组件 -->
<template>
    <div>
        <!-- <el-select 
            v-model="selectedValue" 
            placeholder="输入名字或手机号码搜索" 
            filterable
            remote
            :remote-method="remoteMethod"
            :loading="loading"
            @change="change" 
            @clear="clear"
        >
            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right;color:var(--grey)">{{ item.mobile }}</span>
            </el-option>
        </el-select> -->
        <el-form label-position="left" :inline="true" ref="form">
            <el-form-item>
                <el-input v-model="selectedValue" placeholder="请输入关键词搜索" prefix-icon="el-icon-search" @change="getUserList(selectedValue)"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getUserList(selectedValue)">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="userList" stripe style="width: 100%">
            <el-table-column prop="name" label="用户名" width="180">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号码" width="180">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="change">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: [Number, String, Array],
                default: null
            },
            type:{
                type: [Number, String],
                default: 0, //0全部 1未绑定客户组的用户 2绑定客户组的用户
            },
            isALL: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                userList: [],
                selectedValue: this.value // 使用本地 data 属性来保存选中的值
            }
        },
        watch: {
            value: {
                immediate: true,
                handler(newVal) {
                    this.selectedValue = newVal; // 监听外部变化以保持同步
                }
            }
        },
        mounted() {
            this.getUserList()
        },
        methods: {
            getUserList(key = ''){
                this.$axios.post('/User/List',{
                    PageIndex: 1,
                    PageSize: 10,
                    type: this.type,
                    isALL: this.isALL,
                    key:key
                }).then((res) => {
                    
                    this.userList = res.rows;
                }).catch((err) => {
                    
                })
            },
            remoteMethod(query) {
                if (query !== '') {
                    this.getUserList(query)
                } else {
                    this.userList = [];
                }
            },
            clear(){
                this.change()
            },
            change(){
                this.$emit('change', this.selectedValue); // 触发 change 事件传递新值
                this.$emit('input', this.selectedValue); // 如果支持 v-model，则也触发 input 事件
                this.$emit('getDetails', this.userList.find((item)=>item.id == this.selectedValue));
            }
        }
    }
</script>